<template>
  <div>
    <el-link
      class="tag"
      :class="{ active: selectedTag === 'all' }"
      :underline="false"
      @click="GetAllDocumentList"
      >全部</el-link
    >
    <el-link
      class="tag"
      :class="{ active: selectedTag === t.id }"
      :underline="false"
      @click="SwitchDocumentListByTag(t)"
      v-for="t in TagList"
      :key="t.id"
      >{{ t.tag_name }}</el-link
    >
    <el-link @click="ViewMore" :underline="false" class="viewmore"
      >查看更多<i class="el-icon-right"></i
    ></el-link>
    <el-dialog
      title="选择合适的标签"
      @close="dialogTagVisible = false"
      :visible.sync="dialogTagVisible"
    >
      <el-link
        class="tag"
        :class="{ active: selectedTag === 'all' }"
        :underline="false"
        @click="GetAllDocumentList"
        >全部</el-link
      >
      <el-link
        class="tag"
        :class="{ active: selectedTag === t.id }"
        :underline="false"
        @click="SwitchDocumentListByTag(t)"
        v-for="t in allTags"
        :key="t.id"
        >{{ t.tag_name }}</el-link
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    listLimit: {
      type: Number,
      required: true
    },
    listPage: {
      type: Number,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      TagList: [],
      limit: 4,
      page: 1,
      dialogTagVisible: false,
      allTags: [],
      selectedTag: null
    }
  },
  mounted() {
    this.getTagList()
  },
  methods: {
    async getTagList() {
      const { limit, page, type } = this
      const res = await this.$API.tags.getTagsListWithType(type, limit, page)
      if (res.status == 200) {
        this.TagList = res.data.payload
      }
    },
    GetAllDocumentList() {
      if (this.dialogTagVisible) this.dialogTagVisible = false
      this.selectedTag = 'all'
      this.$bus.$emit('SwitchDocumentList', 'all')
    },
    SwitchDocumentListByTag(tag) {
      if (this.dialogTagVisible) this.dialogTagVisible = false
      this.selectedTag = tag.id
      this.$bus.$emit('SwitchDocumentList', tag.id)
    },
    async ViewMore() {
      const { type } = this
      const res = await this.$API.tags.getTagsListWithoutPage(type)
      if (res.status == 200) {
        this.allTags = res.data
        this.dialogTagVisible = true
      }
    }
  }
}
</script>

<style scoped>
.tags {
  margin-right: 20px;
}
.tag {
  color: #003d8f;
  font-size: 12px;
  background-color: #d9e8fe;
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  height: 16px;

  padding: 3px 8px;
  margin-right: 12px;
  margin-bottom: 13px;
  /* transition: all 0.2s; */
}
.tag:hover,
.tag:active {
  transform: scale(1.05);
  color: #fff;
  background-color: #0077fa;
}
.active {
  transform: scale(1.05);
  color: #fff;
  background-color: #0077fa;
}
.viewmore {
  color: #003d8f;
  font-size: 12px;
  background-color: #ffffff;
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  height: 16px;

  padding: 3px 8px;
  margin-right: 12px;
  margin-bottom: 13px;
}
.viewmore:hover {
  transform: scale(1.05);
  color: #003d8f;
  background-color: #0077fa;
}
</style>
